<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        html,
        body {
            position: relative;

        }

        html {
            background-image: url('images/11.webp');
            /* background-repeat: no-repeat; */
            /* background-size: 100% 100%; */

        }

        body {
            margin-left: 120px;
            margin-top: 120px;


        }

        .box {
            width: 850px;
            height: 100%;
            float: left;
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            opacity: 0.7;


        }

        img {

            width: 100%;
        }

        .box>.box1 {
            width: 199px;
            /* height: 100%; */
            /* border: 1px solid rgb(99, 98, 98); */
            text-align: center;
            background-color: white;
            margin-bottom: 10px;

        }

        p {
            font-size: 13px;
        }

        span {
            font-size: 13px;

        }

        button {
            width: 120px;
            height: 40px;
            margin-bottom: 10px;
            margin-top: 10px;
            background-color: black;
            color: white;

        }

        .box2 {
            width: 500px;
            height: 615px;
            float: left;
            /* border: 1px solid black; */
            background-color: white;
            margin-left: 10px;
            opacity: 0.7;
            overflow: auto;
            padding-top: 50px;

        }

        /* .box2>p {
            font-size: 16px;
            font-weight: bold;
        } */

        .box2>.box3 {
            height: 60px;
            width: 100%;
            display: flex;
            justify-content: space-evenly;
            margin-bottom: 10px;
        }

        .box2>.box3 img {
            height: 100%;
            width: 60px;

        }

        .box2>.box3>span {
            line-height: 60px;

        }

        .box2>p {
            margin-bottom: 20px;
            font-size: 20px;
            text-align: center;
            margin-top: 10px;
            line-height: 60px;
        }

        .box2>.box3>.quantity {
            width: 60px;
            height: 100%;
            text-align: center;
            display: flex;
            justify-content: space-around;
            line-height: 60px;
        }

        .title {
            position: absolute;
            left: 61.5%;
            top: 50%;
            font-size: 20px;
        }
    </style>

</head>

<body>

    <div class="box">

    </div>
    <div class="box2">
    </div>
    <div class="title">购物车() &nbsp;&nbsp;总价:元</div>
</body>

</html>
<script>
    var good = [
        { id: 1, 'images': 'images/1.jpg', 'name': 'CHRISTOPHER 小号双肩包', 'money': '33500  ', count: 1 },
        { id: 2, 'images': 'images/2.jpg', 'name': 'LV BAROQUE RANGER 平底靴', 'money': '13400 ',count: 1 },
        { id: 3, 'images': 'images/3.jpg', 'name': 'TAPESTRY 双面渔夫帽', 'money': '5900  ', count: 1 },
        { id: 4, 'images': 'images/4.jpg', 'name': 'LV FLOWER 滑板', 'money': '18700  ', count: 1 },
        { id: 5, 'images': 'images/5.jpg', 'name': 'BEJEWELED 90 方巾', 'money': '3800  ', count: 1 },
        { id: 6, 'images': 'images/6.jpg', 'name': 'MICRO MÉTIS 链条包', 'money': '14300', count: 1 },
        { id: 7, 'images': 'images/7.jpg', 'name': 'CAMPANA BROTHERS 座椅', 'money': '705000  ', count: 1 },
        { id: 8, 'images': 'images/8.jpg', 'name': 'TAMBOUR DAMIER 计时腕表', 'money': '64150  ', count: 1 }
    ]
    
    var boxEle = document.querySelector('.box')
    function shoppings() {


        let set = ``
        for (var i = 0; i < good.length; i++) {
            set += `
        <div class="box1">
        <img src="${good[i].images}" alt="">
        <span>${good[i].name}</span>
        <p>¥${good[i].money}</p>
        <button>加入购物车</button>
        </div>
        `
            boxEle.innerHTML = set
        }

    }
    shoppings()
    var boxELe1 = document.querySelector('.box2')
    console.log(boxELe1);

    function shoppingse(goode) {
        let set1 = ``
        for (var i = 0; i < goode.length; i++) {
            set1 += `
        <div class="box3">
        <input type="checkbox">
        <img src="${goode[i].images}" alt="">
        <span>${goode[i].name}</span>    
        <span>¥${goode[i].money}</span>
        <div class="quantity">
                <div class="add">+</div>
                <div class="digit">${goode[i].count}</div>
                <div class="subtract">-</div>
            </div>
        <span>删除</span>
        </div>
        `



        boxELe1.innerHTML = set1   
        //渲染商品数量  
        var count = goode.reduce((t, item) => {
            return  t+item.count
            console.log(t+itrm.count);
        }, 0)
        var number = goode.reduce((t, item) => {
            return  t+item.count*item.money
        }, 0)
        console.log(count);
        var gwc = document.querySelector('.title')
        gwc.innerHTML = `购物车(${count})总价¥${number}元`
       
       
        }
       
        


    }



    var Shopping = { bull1: [] }
    //获取购物车数据


    //给good添加点击事件


    boxEle.onclick = function (e) {
        console.log(777);
         if (e.target.tagName == 'BUTTON'){
            let btns = [...document.querySelectorAll('button')]
            console.log(btns);
            let index = btns.findIndex((item) => {
                return item == e.target
                console.log(index);
            })

            //添加数据到购物车数组
            Shopping.bull1.push(good[index])
            console.log(Shopping.bull1);
            //重新渲染购物车列表
            shoppingse(Shopping.bull1)

        }else if(Shopping.bull1==good){
            goode[i].count++
            console.log(goode[i].count++);
        }


    }


















</script>